<template>
  <a-card :bordered="false" style="position: relative;">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper" style="margin-top: 15px;">
      <a-form-model layout="inline">
        <a-row :gutter="6">
          <a-col :md="6">
            <a-form-model-item label="短信劝阻时间" class="form-item-label">
              <a-range-picker
                :allowClear="true"
                v-model="rangePickerTime"
                valueFormat="YYYY-MM-DD"
                @change="rangePickerChange"
              />
            </a-form-model-item>
          </a-col>
          <a-col :md="6">
            <a-form-model-item label="受害人手机号" class="form-item-label">
              <a-input placeholder="请输入" v-model="pageFilter.victimPhone" />
            </a-form-model-item>
          </a-col>
          <a-col :md="6">
            <a-form-model-item label="劝阻账号" class="form-item-label">
              <a-input placeholder="请输入" v-model="pageFilter.dissuadeName" />
            </a-form-model-item>
          </a-col>
          <a-col :md="6">
            <a-form-model-item label="短信类型" class="form-item-label">
              <j-search-select-tag placeholder="请选择" v-model="pageFilter.type" :dictOptions="options1" />
            </a-form-model-item>
          </a-col>
          <a-col :md="6">
            <a-form-model-item label="发送状态" class="form-item-label">
              <j-search-select-tag placeholder="请选择" v-model="pageFilter.status" :dictOptions="options2" />
            </a-form-model-item>
          </a-col>
          <a-col :md="6">
            <a-form-model-item label="呼叫状态" class="form-item-label">
              <j-search-select-tag placeholder="请选择" v-model="pageFilter.voiceStatus" :dictOptions="options3" />
            </a-form-model-item>
          </a-col>

          <a-col :md="6">
            <a-form-model-item label="数据来源" class="form-item-label">
              <j-search-select-tag placeholder="请选择" v-model="pageFilter.sourceFlag" :dictOptions="options4" />
            </a-form-model-item>
          </a-col>

          <a-col :md="6">
            <a-form-model-item>
              <a-button type="primary" @click="onQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="onResetForm" icon="reload" style="margin-left: 4px">重置</a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <downLoadComponents
        ref="downLoadComponentsId"
        :formData="exportDowmData"
        :apiUrl="downUrl"
        :fileText="fileText + '.xls'"
      >
        <a-button type="primary" @click="onExportDowm">
          导出
        </a-button>
      </downLoadComponents>
    </div>
    <!-- 表格展示 -->
    <div class="table-page-content">
      <z-table
        ref="table"
        rowKey="id"
        :showColSettings="false"
        :showAlert="false"
        :showSelection="true"
        :loading="loading"
        :columns="columns"
        :dataSource="pageData"
        @selectedRowKey="onSelectedRow"
        @change="onTableChange"
      >
        <!-- 字符串超长截取省略号显示-->
        <template slot="templateContent" slot-scope="text">
          <j-ellipsis :value="text" :length="40" />
        </template>
      </z-table>
    </div>
  </a-card>
</template>

<script>
import { listHistorySms, exportHistorySmsXls } from '@/api/warning/WarningData.js'
import downLoadComponents from '@/components/zxd/downLoad'
export default {
  components: {
    downLoadComponents
  },
  data() {
    return {
      rangePickerTime: [],
      options1: [
        { text: '全部', value: '' },
        { text: '短信', value: '1' },
        { text: '智能语音', value: '2' },
      ],
      options2: [
        { text: '全部', value: '' },
        { text: '成功', value: '1' },
        { text: '失败', value: '2' },
        { text: '发送中', value: '3' },
      ],
      options3: [
        { text: '全部', value: '' },
        { text: '未呼叫', value: '0' },
        { text: '接通', value: '1' },
        { text: '无应答', value: '2' },
        { text: '用户忙', value: '3' },
        { text: '空号,', value: '4' },
        { text: '关机', value: '5' },
        { text: '停机', value: '6' },
        { text: '其他错误', value: '7' },
        { text: '黑名单', value: '8' },
        { text: '分机非工作时段', value: '9' },
        { text: '分机离线', value: '10' },
        { text: '分机忙', value: '11' },
        { text: '分机免扰', value: '12' },
        { text: '外呼中', value: '20' },
      ],
      options4: [
        { text: '全部', value: '' },
        { text: '国家中心', value: '1' },
        { text: '公安部', value: '2' },
        { text: '吉林省反炸专业平台', value: '6' },
        { text: '历史数据', value: '20' },
      ],
      columns: [
        {
          title: '受害人手机号',
          dataIndex: 'msisdn',
          align: 'center',
          width: 100
        },
        {
          title: '模板内容',
          align: 'center',
          dataIndex: 'templateContent',
          scopedSlots: { customRender: 'templateContent' },
          width: 200
        },
        {
          title: '劝阻账号',
          dataIndex: 'dissuadeName',
          align: 'center',
          width: 80
        },
        {
          title: '短信类型',
          dataIndex: 'type',
          align: 'center',
          width: 100,
          customRender: (text) => {
            return this.getItemsFrom(this.options1, text)
          }
        },
        {
          title: '发送时间',
          dataIndex: 'smsSendTime',
          align: 'center',
          width: 100
        },
        {
          title: '发送状态',
          dataIndex: 'status',
          align: 'center',
          width: 100,
          customRender: (text) => {
            return this.getItemsFrom(this.options2, text)
          }
        },
        {
          title: '呼叫状态',
          dataIndex: 'voiceStatus',
          align: 'center',
          width: 100,
          customRender: (text) => {
            return this.getItemsFrom(this.options3, text)
          }
        },
        {
          title: '数据来源',
          dataIndex: 'sourceFlag',
          align: 'center',
          width: 100,
          customRender: (text) => {
            return this.getItemsFrom(this.options4, text)
          }
        },
        {
          title: '接通时长',
          dataIndex: 'throughLength',
          align: 'center',
          width: 100
        },
      ],
      pageFilter: {
        pageNo: 1, // 当前页数
        pageSize: 10 // 每页显示几条数据
      },
      loading: false,
      show: false,
      fileText: '历史短信列表',
      downUrl: '/jeecg-fz/viewWarningDataDetail/exportHistorySmsXls',
      pageData: [],
      exportDowmData: {}
    }
  },
  mounted() {
    this.refreshTable()
  },
  methods: {
    onSelectedRow(keys) {
      this.exportDowmData = {
        historySmsQueryVO: {
          dissuadeSmsEndTime: this.pageFilter.dissuadeSmsEndTime,
          dissuadeSmsStartTime: this.pageFilter.dissuadeSmsStartTime,
          pageNo: this.pageFilter.pageNo,
          pageSize: this.pageFilter.pageSize,
          victimPhone: this.pageFilter.victimPhone,
          sourceFlag: this.pageFilter.sourceFlag
        },
        idList: keys
      }
    },
    refreshTable() {
      this.loading = true
      listHistorySms(this.pageFilter)
        .then(res => {
          if (res.success) {
            this.pageData = res.result
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.loading = false
        })
    },
    onQuery() {
      this.$refs.table.onClearRowKeys()
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.$refs.table.onClearRowKeys()
      this.rangePickerTime = undefined
      this.pageFilter = {
        pageNo: 1, // 当前页数
        pageSize: 10 // 每页显示几条数据
      }
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = {currentPage: 'pageNo'}
      let paginations= Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations);
      this.refreshTable();
    },
    // 选择等保对象概况时间
    rangePickerChange(date, dateString) {
      this.pageFilter.dissuadeSmsStartTime = dateString[0]
      this.pageFilter.dissuadeSmsEndTime = dateString[1]
      this.rangePickerTime = date
    },
    onExportDowm() {
      this.$refs.downLoadComponentsId.exportDowmPOST()
      this.$refs.table.onClearRowKeys()
    },
    getItemsFrom(datas, key) {
      let item = datas.filter(t => t["value"] !=='' && t["value"] == key)
      if(item && item.length>0){
        return item[0]["text"]
      }
    },
  },
  created() {}
}
</script>
<style lang="less" scoped></style>
